$(document).ready(function(){
    ocxPanel.init();

});
/*  Default Settings  */
var templates = {
    normal: {
        square1: {title: "1×1", rows:1, cols:1, units:[{x: 0, y: 0, w: 1,h: 1}]},
        square4: {title: "2×2", rows:2, cols:2, units:[{x: 0, y: 0, w: 1,h: 1},{x: 1, y: 0, w: 1,h: 1},{x: 0, y: 1, w: 1,h: 1},{x: 1, y: 1, w: 1,h: 1}]},
        square6: {title: "2×3", rows:2, cols:3, units:[{x: 0, y: 0, w : 1,h: 1},{x: 1, y: 0, w : 1,h: 1},{x: 2, y: 0, w : 1,h: 1},{x: 0, y: 1, w : 1,h: 1},{x: 1, y: 1, w : 1,h: 1},{x: 2, y: 1, w : 1,h: 1}]},
        square9: {title: "3×3", rows:3, cols:3, units:[{x: 0, y: 0, w : 1,h: 1},{x:1, y: 0, w : 1,h: 1},{x: 2, y: 0, w : 1,h: 1},{x: 0, y: 1, w : 1,h: 1},{x: 1, y: 1, w : 1,h: 1},{x: 2, y: 1, w : 1,h: 1},{x: 0, y: 2, w : 1,h: 1},{x: 1, y: 2, w : 1,h: 1},{x: 2, y: 2, w : 1,h: 1}]},
        square12: {title: "3×4", rows:3, cols:4, units:[{x: 0, y: 0, w : 1,h: 1},{x: 1, y: 0, w : 1,h: 1},{x: 2, y: 0, w : 1,h: 1},{x: 3, y: 0, w : 1,h: 1},{x: 0, y: 1, w : 1,h: 1},{x: 1, y: 1, w : 1,h: 1},{x: 2, y: 1, w : 1,h: 1},{x: 3, y: 1, w : 1,h: 1},{x: 0, y: 2, w : 1,h: 1},{x: 1, y: 2, w : 1,h: 1},{x: 2, y: 2, w : 1,h: 1},{x: 3, y: 2, w : 1,h: 1}]},
        square15: {title: "3×5", rows:3, cols:5, units:[{x: 0, y: 0, w : 1,h: 1},{x: 1, y: 0, w : 1,h: 1},{x: 2, y: 0, w : 1,h: 1},{x: 3, y: 0, w : 1,h: 1},{x: 4, y: 0, w : 1,h: 1},{x: 0, y: 1, w : 1,h: 1},{x: 1, y: 1, w : 1,h: 1},{x: 2, y: 1, w : 1,h: 1},{x: 3, y: 1, w : 1,h: 1},{x: 4, y: 1, w : 1,h: 1},{x: 0, y: 2, w : 1,h: 1},{x: 1, y: 2, w : 1,h: 1},{x: 2, y: 2, w : 1,h: 1},{x: 3, y: 2, w : 1,h: 1},{x: 4, y: 2, w : 1,h: 1}]},
        square16: {title: "4×4", rows:4, cols:4, units:[{x: 0, y: 0, w : 1,h: 1},{x: 1, y: 0, w : 1,h: 1},{x: 2, y: 0, w : 1,h: 1},{x: 3, y: 0, w : 1,h: 1},{x: 0, y: 1, w : 1,h: 1},{x: 1, y: 1, w : 1,h: 1},{x: 2, y: 1, w : 1,h: 1},{x: 3, y: 1, w : 1,h: 1},{x: 0, y: 2, w : 1,h: 1},{x: 1, y: 2, w : 1,h: 1},{x: 2, y: 2, w : 1,h: 1},{x: 3, y: 2, w : 1,h: 1},{x: 0, y: 3, w : 1,h: 1},{x: 1, y: 3, w : 1,h: 1},{x: 2, y: 3, w : 1,h: 1},{x: 3, y: 3, w : 1,h: 1}]},
        square24: {title: "4×6", rows:4, cols:6, units:[{x: 0, y: 0, w : 1,h: 1},{x: 1, y: 0, w : 1,h: 1},{x: 2, y: 0, w : 1,h: 1},{x: 3, y: 0, w : 1,h: 1},{x: 4, y: 0, w : 1,h: 1},{x: 5, y: 0, w : 1,h: 1},{x: 0, y: 1, w : 1,h: 1},{x: 1, y: 1, w : 1,h: 1},{x: 2, y: 1, w : 1,h: 1},{x: 3, y: 1, w : 1,h: 1},{x: 4, y: 1, w : 1,h: 1},{x: 5, y: 1, w : 1,h: 1},{x: 0, y: 2, w : 1,h: 1},{x: 1, y: 2, w : 1,h: 1},{x: 2, y: 2, w : 1,h: 1},{x: 3, y: 2, w : 1,h: 1},{x: 4, y: 2, w : 1,h: 1},{x: 5, y: 2, w : 1,h: 1},{x: 0, y: 3, w : 1,h: 1},{x: 1, y: 3, w : 1,h: 1},{x: 2, y: 3, w : 1,h: 1},{x: 3, y: 3, w : 1,h: 1},{x: 4, y: 3, w : 1,h: 1},{x: 5, y: 3, w : 1,h: 1}]},
        square25: {title: "5×5", rows:5, cols:5, units:[{x: 0, y: 0, w : 1,h: 1},{x: 1, y: 0, w : 1,h: 1},{x: 2, y: 0, w : 1,h: 1},{x: 3, y: 0, w : 1,h: 1},{x: 4, y: 0, w : 1,h: 1},{x: 0, y: 1, w : 1,h: 1},{x: 1, y: 1, w : 1,h: 1},{x: 2, y: 1, w : 1,h: 1},{x: 3, y: 1, w : 1,h: 1},{x: 4, y: 1, w : 1,h: 1},{x: 0, y: 2, w : 1,h: 1},{x: 1, y: 2, w : 1,h: 1},{x: 2, y: 2, w : 1,h: 1},{x: 3, y: 2, w : 1,h: 1},{x: 4, y: 2, w : 1,h: 1},{x: 0, y: 3, w : 1,h: 1},{x: 1, y: 3, w : 1,h: 1},{x: 2, y: 3, w : 1,h: 1},{x: 3, y: 3, w : 1,h: 1},{x: 4, y: 3, w : 1,h: 1},{x: 0, y: 4, w : 1,h: 1},{x: 1, y: 4, w : 1,h: 1},{x: 2, y: 4, w : 1,h: 1},{x: 3, y: 4, w : 1,h: 1},{x: 4, y: 4, w : 1,h: 1}]},
        prominent3: {title: "1＋2", rows:2, cols:3, units:[{x: 0, y: 0, w : 2,h: 2},{x: 2, y: 0, w : 1,h: 1},{x: 2, y: 1, w : 1,h: 1}]},
        prominent4: {title: "1＋3", rows:3, cols:4, units:[{x: 0, y: 0, w : 3,h: 3},{x: 3, y: 0, w : 1,h: 1},{x: 3, y: 1, w : 1,h: 1},{x: 3, y: 2, w : 1,h: 1}]},
        mix6: {title: "2＋4", rows:3, cols:4, units:[{x: 0, y: 0, w : 2,h: 2},{x: 2, y: 0, w : 2,h: 2},{x: 0, y: 2, w : 1,h: 1},{x: 1, y: 2, w : 1,h: 1},{x: 2, y: 2, w : 1,h: 1},{x: 3, y: 2, w : 1,h: 1}]},
        prominent7: {title: "1＋6", rows:3, cols:5, units:[{x: 0, y: 0, w : 3,h: 3},{x: 3, y: 0, w : 1,h: 1},{x: 4, y: 0, w : 1,h: 1},{x: 3, y: 1, w : 1,h: 1},{x: 4, y: 1, w : 1,h: 1},{x: 3, y: 2, w : 1,h: 1},{x: 4, y: 2, w : 1,h: 1}]},
        prominent9: {title: "1＋8", rows:3, cols:4, units:[{x: 0, y: 0, w : 2,h: 2},{x: 2, y: 0, w : 1,h: 1},{x: 3, y: 0, w : 1,h: 1},{x: 2, y: 1, w : 1,h: 1},{x: 3, y: 1, w : 1,h: 1},{x: 0, y: 2, w : 1,h: 1},{x: 1, y: 2, w : 1,h: 1},{x: 2, y: 2, w : 1,h: 1},{x: 3, y: 2, w : 1,h: 1}]},
        mix12: {title: "4＋8", rows:4, cols:6, units:[{x: 0, y: 0, w : 2,h: 2},{x: 2, y: 0, w : 2,h: 2},{x: 4, y: 0, w : 1,h: 1},{x: 5, y: 0, w : 1,h: 1},{x: 4, y: 1, w : 1,h: 1},{x: 5, y: 1, w : 1,h: 1},{x: 0, y: 2, w : 2,h: 2},{x: 2, y: 2, w : 2,h: 2},{x: 4, y: 2, w : 1,h: 1},{x: 5, y: 2, w : 1,h: 1},{x: 4, y: 3, w : 1,h: 1},{x: 5, y: 3, w : 1,h: 1}]},
        mix15: {title: "3＋12", rows:4, cols:6, units:[{x: 0, y: 0, w : 2,h: 2},{x: 2, y: 0, w : 2,h: 2},{x: 4, y: 0, w : 2,h: 2},{x: 0, y: 2, w : 1,h: 1},{x: 1, y: 2, w : 1,h: 1},{x: 2, y: 2, w : 1,h: 1},{x: 3, y: 2, w : 1,h: 1},{x: 4, y: 2, w : 1,h: 1},{x: 5, y: 2, w : 1,h: 1},{x: 0, y: 3, w : 1,h: 1},{x: 1, y: 3, w : 1,h: 1},{x: 2, y: 3, w : 1,h: 1},{x: 3, y: 3, w : 1,h: 1},{x: 4, y: 3, w : 1,h: 1},{x: 5, y: 3, w : 1,h: 1}]}
    },
    wide: {
        square1: {title: "1×1", rows:1, cols:1, units:[{x: 0, y: 0, w: 1,h: 1}]},
        square6: {title: "2×3", rows:2, cols:3, units:[{x: 0, y: 0, w : 1,h: 1},{x: 1, y: 0, w : 1,h: 1},{x: 2, y: 0, w : 1,h: 1},{x: 0, y: 1, w : 1,h: 1},{x: 1, y: 1, w : 1,h: 1},{x: 2, y: 1, w : 1,h: 1}]},
        square12: {title: "3×4", rows:3, cols:4, units:[{x: 0, y: 0, w : 1,h: 1},{x: 1, y: 0, w : 1,h: 1},{x: 2, y: 0, w : 1,h: 1},{x: 3, y: 0, w : 1,h: 1},{x: 0, y: 1, w : 1,h: 1},{x: 1, y: 1, w : 1,h: 1},{x: 2, y: 1, w : 1,h: 1},{x: 3, y: 1, w : 1,h: 1},{x: 0, y: 2, w : 1,h: 1},{x: 1, y: 2, w : 1,h: 1},{x: 2, y: 2, w : 1,h: 1},{x: 3, y: 2, w : 1,h: 1}]},
        square15: {title: "3×5", rows:3, cols:5, units:[{x: 0, y: 0, w : 1,h: 1},{x: 1, y: 0, w : 1,h: 1},{x: 2, y: 0, w : 1,h: 1},{x: 3, y: 0, w : 1,h: 1},{x: 4, y: 0, w : 1,h: 1},{x: 0, y: 1, w : 1,h: 1},{x: 1, y: 1, w : 1,h: 1},{x: 2, y: 1, w : 1,h: 1},{x: 3, y: 1, w : 1,h: 1},{x: 4, y: 1, w : 1,h: 1},{x: 0, y: 2, w : 1,h: 1},{x: 1, y: 2, w : 1,h: 1},{x: 2, y: 2, w : 1,h: 1},{x: 3, y: 2, w : 1,h: 1},{x: 4, y: 2, w : 1,h: 1}]},
        square24: {title: "4×6", rows:4, cols:6, units:[{x: 0, y: 0, w : 1,h: 1},{x: 1, y: 0, w : 1,h: 1},{x: 2, y: 0, w : 1,h: 1},{x: 3, y: 0, w : 1,h: 1},{x: 4, y: 0, w : 1,h: 1},{x: 5, y: 0, w : 1,h: 1},{x: 0, y: 1, w : 1,h: 1},{x: 1, y: 1, w : 1,h: 1},{x: 2, y: 1, w : 1,h: 1},{x: 3, y: 1, w : 1,h: 1},{x: 4, y: 1, w : 1,h: 1},{x: 5, y: 1, w : 1,h: 1},{x: 0, y: 2, w : 1,h: 1},{x: 1, y: 2, w : 1,h: 1},{x: 2, y: 2, w : 1,h: 1},{x: 3, y: 2, w : 1,h: 1},{x: 4, y: 2, w : 1,h: 1},{x: 5, y: 2, w : 1,h: 1},{x: 0, y: 3, w : 1,h: 1},{x: 1, y: 3, w : 1,h: 1},{x: 2, y: 3, w : 1,h: 1},{x: 3, y: 3, w : 1,h: 1},{x: 4, y: 3, w : 1,h: 1},{x: 5, y: 3, w : 1,h: 1}]},
        prominent3: {title: "1＋2", rows:2, cols:3, units:[{x: 0, y: 0, w : 2,h: 2},{x: 2, y: 0, w : 1,h: 1},{x: 2, y: 1, w : 1,h: 1}]},
        prominent4: {title: "1＋3", rows:3, cols:4, units:[{x: 0, y: 0, w : 3,h: 3},{x: 3, y: 0, w : 1,h: 1},{x: 3, y: 1, w : 1,h: 1},{x: 3, y: 2, w : 1,h: 1}]},
        mix6: {title: "2＋4", rows:3, cols:4, units:[{x: 0, y: 0, w : 2,h: 2},{x: 2, y: 0, w : 2,h: 2},{x: 0, y: 2, w : 1,h: 1},{x: 1, y: 2, w : 1,h: 1},{x: 2, y: 2, w : 1,h: 1},{x: 3, y: 2, w : 1,h: 1}]},
        prominent7: {title: "1＋6", rows:3, cols:5, units:[{x: 0, y: 0, w : 3,h: 3},{x: 3, y: 0, w : 1,h: 1},{x: 4, y: 0, w : 1,h: 1},{x: 3, y: 1, w : 1,h: 1},{x: 4, y: 1, w : 1,h: 1},{x: 3, y: 2, w : 1,h: 1},{x: 4, y: 2, w : 1,h: 1}]},
        prominent9: {title: "1＋8", rows:3, cols:4, units:[{x: 0, y: 0, w : 2,h: 2},{x: 2, y: 0, w : 1,h: 1},{x: 3, y: 0, w : 1,h: 1},{x: 2, y: 1, w : 1,h: 1},{x: 3, y: 1, w : 1,h: 1},{x: 0, y: 2, w : 1,h: 1},{x: 1, y: 2, w : 1,h: 1},{x: 2, y: 2, w : 1,h: 1},{x: 3, y: 2, w : 1,h: 1}]},
        mix12: {title: "4＋8", rows:4, cols:6, units:[{x: 0, y: 0, w : 2,h: 2},{x: 2, y: 0, w : 2,h: 2},{x: 4, y: 0, w : 1,h: 1},{x: 5, y: 0, w : 1,h: 1},{x: 4, y: 1, w : 1,h: 1},{x: 5, y: 1, w : 1,h: 1},{x: 0, y: 2, w : 2,h: 2},{x: 2, y: 2, w : 2,h: 2},{x: 4, y: 2, w : 1,h: 1},{x: 5, y: 2, w : 1,h: 1},{x: 4, y: 3, w : 1,h: 1},{x: 5, y: 3, w : 1,h: 1}]},
        mix15: {title: "3＋12", rows:4, cols:6, units:[{x: 0, y: 0, w : 2,h: 2},{x: 2, y: 0, w : 2,h: 2},{x: 4, y: 0, w : 2,h: 2},{x: 0, y: 2, w : 1,h: 1},{x: 1, y: 2, w : 1,h: 1},{x: 2, y: 2, w : 1,h: 1},{x: 3, y: 2, w : 1,h: 1},{x: 4, y: 2, w : 1,h: 1},{x: 5, y: 2, w : 1,h: 1},{x: 0, y: 3, w : 1,h: 1},{x: 1, y: 3, w : 1,h: 1},{x: 2, y: 3, w : 1,h: 1},{x: 3, y: 3, w : 1,h: 1},{x: 4, y: 3, w : 1,h: 1},{x: 5, y: 3, w : 1,h: 1}]}
    }
};


// ocxPanel.setting 配置预览工具栏
var ocxPanel;
(function($){
    ocxPanel = {
        getScreenMode: function() {
           /* var screenMode = "wide",
                screenW = window.screen.width,
                screenH = window.screen.height;
            if(screenW/screenH < 16/9) //大于等于16:9的比例为宽屏
                screenMode = "normal";
            return screenMode;*/
            return "normal" ;
        },
        init: function() {
			var that=this;
            // 栅格选择     绑定鼠标悬浮，
            $('#grids li').click(function(){
                $('#grids li.selected').not(this).removeClass('selected');
                $(this).addClass('selected');
               // $($("#grids li").get(0)).addClass("selected");

            }).on("mouseenter",function(){
                    $(this).children(".hoverToolbar").show();
                }).on("mouseleave",function(){
                    $(this).children(".hoverToolbar").hide();
                });
            //图片拖动效果
            var startObj=null;
            $("#grids li").off("mousedown").off("mouseup");
            var isIE=!!window.ActiveXObject, isIE8=isIE&&!!document.documentMode;

            $("#grids li").on("mousedown.grid",function(e){
               startObj=$(this);

                if(isIE && isIE8){
                    this.setCapture && this.setCapture();
                }
                return false;
            })
            $(document).on("mouseup.grid",function(e){    //debugger

                    if(isIE && isIE8){
                        this.releaseCapture&& this.releaseCapture();
                    }
                    if((startObj!==null&&startObj.length)&&$(e.target).parents("#grids li").length){
                        var temp;
                        temp=startObj.attr('style');
                        startObj.attr('style',$(e.target).parents('#grids li').attr('style'));
                        $(e.target).parents("#grids li").attr('style',temp);
                        //交换index
						tempIndex=startObj.attr('index');
						startObj.attr('index',$(e.target).parents('#grids li').attr('index'));
						$(e.target).parents("#grids li").attr('index',tempIndex);
                    }


                })
            //双击放大
            this.isFullScreen=true;    var curStyle="",arrayBlock;
            $("#grids li").on("dblclick",function(){
                    if(that.isFullScreen){
                        arrayBlock=[]
                        curStyle=$(this).attr("style")!==undefined ?$(this).attr("style"):"";
                        $(this).siblings().each(function(i){
                            if( $(this).css("display")=="block"){
                                arrayBlock.push(i);
                                $(this).css("display","none");
                            }

                        });
                        $(this).css({"width":"100%","height":"100%","top":0,"left":0});

                    }else{
                        $(this).siblings().each(function(i){
                            if(arrayBlock[i]==i)
                            $(this).css("display","block");
                        });
                        $(this).attr("style",curStyle)

                    }
                    that.isFullScreen=!that.isFullScreen;
                })

            var dm = $('#gridsModeGroup');
            dm.parent().addClass('screen-' + ocxPanel.getScreenMode());
            //加载栅格模板列表
			var createGridsLi=function (){
				var screenMode = ocxPanel.getScreenMode();
                    var settings = $.extend({}, $.fn.monitor.defaults, settings);
                    //根据模板内容，绘制栅格选项
                    var tempList = [],
                        htmlStr = "";
                    dm.parent().addClass('screen-' + screenMode);
                    tempList.push('<dl><dd>');
                    tempList.push('<ul>');
                    $.each(templates[screenMode], function(key, value){
                    	if(key=="square4"){
                    		tempList.push('<li class="active"><a href="#" class="act-grids-',key,'" data-trigger="monitor.grids" data-template="',key,'" data-quantity="',value.units.length,'"><span class="ico"></span><i></i></a><span>',value.title,'</span></li>')
                    	}
                    	else{
                    		tempList.push('<li><a href="#" class="act-grids-',key,'" data-trigger="monitor.grids" data-template="',key,'" data-quantity="',value.units.length,'"><span class="ico"></span><i></i></a><span>',value.title,'</span></li>')
                    	}
                    });
                    tempList.push('</ul>');
                    tempList.push('</dd></dl>');
                    htmlStr = tempList.join('');
                    dm.html(htmlStr);
			}
            $('#gridsMode').bind('click', function(){
               // $(".window-bar a").removeClass("active") ;
                if(dm.find("li").length==0){
                    createGridsLi();
                }
                if(dm.css("display")=="block"){
                    $('#gridsMode').removeClass("active") ;
					dm.css("display","none");
                }else{
                    $('#gridsMode').addClass("active") ;
					dm.css("display","block");
                }

            });
            //添加鼠标点击其他地方 gridsModeGroup隐藏，与视频同步
            $(document).on("click",function(e){
                if(!($(e.target)==$("#gridsMode")||$(e.target).parents("#gridsModeGroup").length>0)&&$('#gridsModeGroup').css("display")=="block"){
                    $('#gridsModeGroup').hide();
                    $('#gridsMode').removeClass("active") ;
                }
            });

            // 栅格功能 初始化
            $('#grids').monitor();
            // 栅格切换
			dm.delegate('ul li', 'click', function(){
				that.isFullScreen=true;
                var template = $(this).find("[data-trigger='monitor.grids']").length>0?$(this).find("[data-trigger='monitor.grids']").attr('data-template'):"";
                $(this).siblings().removeClass("active");
				$(".window-bar>a").removeClass("active") ;
                $(this).addClass("active");
				if(template!==null)
					$('#grids').monitor({templateName:template});
                $('#grids li.selected').removeClass('selected');
                $($("#grids li").get(0)).addClass("selected");
            });
           
			// 栅格悬浮效果
            dm.delegate('li', 'mouseenter', function(e){
                $(this).addClass("hover");
            }).delegate('li', 'mouseleave', function(e){
                $(this).removeClass("hover");
            });
			//快捷切换
			$('[data-trigger="monitor.grids"]').click(function(){
				that.isFullScreen=true;
				if(dm.find("li").length==0){
                    createGridsLi();
                }
               var template = $(this).attr('data-template');
			   $(this).siblings().removeClass("active");
                $(this).addClass("active");
				if($('#gridsModeGroup li a[data-template='+template+']').length)
					$('#gridsModeGroup li').removeClass("active");
					$('#gridsModeGroup li a[data-template='+template+']').parent().addClass("active");
				
                $('#grids').monitor({templateName:template});
                $('#grids li.selected').removeClass('selected');
                $($("#grids li").get(0)).addClass("selected");
            });

        }
    }
})(jQuery);

// Monitor 栅格系统组件
(function($){
    /*  Variables  */
    $.fn.monitor = function(settings){
        var base = this,
            element = $(this),
            settings = $.extend({}, $.fn.monitor.defaults, settings);

        base.init = function(){
            $('#grids').unbind('resize').bind('resize',function(){
                _resize();
            });
            setTimeout(_resize,100);
            // need jquery.ui.swappable plugin
            if(settings.swappable){
                base.swappable();
            }
            settings.templates = templates || {};
            settings.screen = ocxPanel.getScreenMode() || "normal";
            if(settings.templateName == "") {
                switch (settings.screen) {
                    case "normal":
                        settings.templateName = "square4";
                        break;
                    case "wide":
                        settings.templateName = "square6";
                        break;
                    default:
                        settings.screen = "normal";
                        settings.templateName = "square4";
                }
            }
           // this.screenNum=settings.templateName.replace(/[^0-9]/ig, "");
            // 更新样式
          //  $('[data-trigger="monitor.grids"]').parent().addClass('active');
            $('[data-trigger="monitor.grids"]').removeClass('active');
            $('[data-trigger="monitor.grids"]').removeClass('selected');
            $('[data-template="' + settings.templateName + '"]').addClass('active');
            $('[data-template="' + settings.templateName + '"]').addClass('selected');
            // 更新btn-group的图标样式
         /*   var cls = $('#gridsMode').attr('class') || "";
            var classname = cls.split(' ') || [],
                str = 'act-grids-';
            $(classname).each(function(idx,item){
                if(item.indexOf(str) > -1) {
                    str = item;
                }
            });
            classname.splice($.inArray(str,classname),1);
            classname.push('act-grids-' + settings.templateName);
            $('#gridsMode').attr('class',classname.join(' '));*/
        };
        var _resize = function(){
            var template = [],
                children = element.children(settings.items),
                fullwidth = element.css("width","100%").width(),
                fullheight = element.css("height","100%").height();
            if(settings.templateCustom && settings.templateData.units && settings.templateData.units.length > 0){
                template = settings.templateData;
            }else if(settings.templates[settings.screen]){
                template = settings.templates[settings.screen][settings.templateName] || [];
            }
			//判断用户是否切换分屏
			var k=0,flag=false;
			$(children).each(function(){
					if($(this).css("display")!=="none"){
						k=k+1;
					}
				});
			if(k==template.units.length){
				flag=true;
			}
			k==0;//回收
			
            element.children(settings.items).show();
            if(template.length > 1)
                element.children(settings.items+":gt("+(template.length-1)+")").hide();
          /*  if(settings.zoomin || settings.templateName == 'square1') {debugger
                var liE = $(children).find(".ocx-container a[name!='']");
                if(settings.templateName == 'square1' && $(settings.items + '.selected', element).length > 0) {
					
                    liE = $(settings.items + '.selected', element)[0];
                }
                $(children).attr({"style":"display:none"});
                $(liE).show().css({"position":"absolute","float":"none","left":0,"top":0,"width":fullwidth,"height":fullheight});
            }else{*/
				if(!flag){
					var hasImgList=[],noImgList=[];
					$(children).each(function(i,li){
						if($(li).find("img").attr("name")==""||$(li).find("img").attr("name")==undefined){
							noImgList.push(li);
						}else{
							hasImgList.push(li);
						}
					});
					i=0;
					var a=0;
					$(hasImgList).each(function(i,item){
						if(template.units && i < template.units.length){
							var r = template.rows, c = template.cols, x = template.units[i].x, y = template.units[i].y, w = template.units[i].w, h = template.units[i].h,
								left = (parseInt((x/c) * Math.pow(10,12))/Math.pow(10,12))*fullwidth,
								top = (parseInt((y/r) * Math.pow(10,12))/Math.pow(10,12))*fullheight,
								width = (parseInt((w/c) * Math.pow(10,12))/Math.pow(10,12))*fullwidth,
								height = (parseInt((h/r) * Math.pow(10,12))/Math.pow(10,12))*fullheight;
							$(item).show().css({"position":"absolute","float":"none","left":left,"top":top,"width":width,"height":height});
							
							a=a+1;
						}else{
							$(item).hide();
						}
						$(item).attr("index",i);
					});
					$(noImgList).each(function(j,item){ var m=a+j;
						if(template.units && m < template.units.length){
							var r = template.rows, c = template.cols, x = template.units[m].x, y = template.units[m].y, w = template.units[m].w, h = template.units[m].h,
								left = (parseInt((x/c) * Math.pow(10,12))/Math.pow(10,12))*fullwidth,
								top = (parseInt((y/r) * Math.pow(10,12))/Math.pow(10,12))*fullheight,
								width = (parseInt((w/c) * Math.pow(10,12))/Math.pow(10,12))*fullwidth,
								height = (parseInt((h/r) * Math.pow(10,12))/Math.pow(10,12))*fullheight;
							$(item).show().css({"position":"absolute","float":"none","left":left,"top":top,"width":width,"height":height});
						}else{
							$(item).hide();
						}
						$(item).attr("index",a+j);
					});
				}else{
					$(children).each(function(i,item){
						var index=$(item).attr("index");
						if(template.units && index < template.units.length){
							
							var r = template.rows, c = template.cols, x = template.units[index].x, y = template.units[index].y, w = template.units[index].w, h = template.units[index].h,
								left = (parseInt((x/c) * Math.pow(10,12))/Math.pow(10,12))*fullwidth,
								top = (parseInt((y/r) * Math.pow(10,12))/Math.pow(10,12))*fullheight,
								width = (parseInt((w/c) * Math.pow(10,12))/Math.pow(10,12))*fullwidth,
								height = (parseInt((h/r) * Math.pow(10,12))/Math.pow(10,12))*fullheight;
							$(item).show().css({"position":"absolute","float":"none","left":left,"top":top,"width":width,"height":height});
						}else{
							$(item).hide();
						}
					});
				}
				
           // }
            $(element).css({visibility:"visible"});
        };
        base.swappable = function(){

        };
        // Entry point
        base.init();
    };
    /*  Default Settings  */
    $.fn.monitor.defaults = {
        templates:          {},
        swappable:          true,//need jquery.ui.swappable plugin
        swappableitems:     'li',//for swappable options
        items:              'li',//for grid item
        screen:             'normal',
        templateName:       '',
        zoomin:             false,
        index:              0,
        templateCustom:     false,
        templateData:      {rows:0, cols:0, units:[]}
    };
})(jQuery);
